<template>
  <div class="content" style="display: flex; color: #1d66a9; height: 100%; margin: auto">
    <div
      ref="engine"
      class="con-c"
      style="
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        justify-content: center;
        align-items: center;
      "
    >
      <div class="wrap">
        <!-- 左主机 -->
        <div
          class="zzj ss"
          style="position: absolute; width: 230px; height: 70px; top: 104px; left: 378px"
          @click="routerPush('/equipment/main/left')"
        ></div>
        <BlinkingLight
          v-if="
            hostRunningStatus(
              1,
              allData.left_main?.z131?.currentValue,
              allData.left_main?.z132?.currentValue
            ) ||
            hostRunningStatus(
              0,
              allData.left_main?.z131?.currentValue,
              allData.left_main?.z132?.currentValue
            )
          "
          :isBlinking="false"
          :position="true"
          :top="122"
          :left="482"
        ></BlinkingLight>
        <!-- 右主机 -->
        <div
          class="yzj ss"
          style="position: absolute; width: 230px; height: 70px; top: 490px; left: 378px"
          @click="routerPush('/equipment/main/right')"
        ></div>
        <BlinkingLight
          v-if="
            hostRunningStatus(
              1,
              allData.right_main?.z231?.currentValue,
              allData.right_main?.z232?.currentValue
            ) ||
            hostRunningStatus(
              0,
              allData.right_main?.z231?.currentValue,
              allData.right_main?.z232?.currentValue
            )
          "
          :isBlinking="false"
          :position="true"
          :top="511"
          :left="482"
        ></BlinkingLight>
        <!-- 发电机组 -->
        <div
          class="fdjz ss"
          style="position: absolute; width: 187px;height: 241px;top: 207px;left: 214px;"
          @click="routerPush('/equipment/pdwlzt')"
        ></div>
        <!-- LightAni(renderValue(0)) -->
        <BlinkingLight
          v-if="LightAni(renderValue(0))"
          :isBlinking="false"
          :position="true"
          :top="225"
          :left="238"
        ></BlinkingLight>

        <BlinkingLight
          v-if="LightAni(renderValue(1))"
          :isBlinking="false"
          :position="true"
          :top="315"
          :left="238"
        ></BlinkingLight>

        <BlinkingLight
          v-if="LightAni(renderValue(2))"
          :isBlinking="false"
          :position="true"
          :top="405"
          :left="238"
        ></BlinkingLight>
        <!-- 柴油机 -->
        <div
          class="cyj ss"
          style="position: absolute; width: 148px; height: 70px; top: 287px; left: 552px"
          @click="routerPush('/equipment/hygzj')"
        ></div>
        <!-- #1货油汞 -->
        <div
          class="hyg ss"
          style="position: absolute; width: 90px; height: 70px; top: 114px; left: 742px"
          @click="routerPush('/equipment/hyg/1')"
        ></div>
        <BlinkingLight
          v-if="Lighthyb(hybData(606, 0, 2))"
          :isBlinking="false"
          :position="true"
          :top="126"
          :left="776"
        ></BlinkingLight>

        <!-- #2货油汞 -->
        <div
          class="hyg ss"
          style="position: absolute; width: 90px; height: 70px; top: 290px; left: 742px"
          @click="routerPush('/equipment/hyg/2')"
        ></div>
        <BlinkingLight
          v-if="Lighthyb(hybData(606, 1, 2))"
          :isBlinking="false"
          :position="true"
          :top="303"
          :left="776"
        ></BlinkingLight>
        <!-- #3货油汞 -->
        <div
          class="hyg ss"
          style="position: absolute; width: 90px; height: 70px; top: 489px; left: 742px"
          @click="routerPush('/equipment/hyg/3')"
        ></div>
        <BlinkingLight
          v-if="Lighthyb(hybData(606, 2, 2))"
          :isBlinking="false"
          :position="true"
          :top="510"
          :left="776"
        ></BlinkingLight>
      </div>
      <!-- 导航栏 -->
      <div class="btn-group" style="position: absolute; bottom: 15px; left: 20px">
        <el-button
          round
          size="large"
          v-for="item in btnList"
          :key="item.id"
          :type="item.type"
          @click="routerPush(item.path)"
        >
          {{ item.text }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import BlinkingLight from "@/components/BlinkingLight.vue";
import { initDecimalPlaces } from "@/utils/utils.js";
const { t } = useI18n();
let allData = inject("allData");
let powerListDate = ref([]);
// 工具
import { routerPush } from "@/plugins/index.js";

const btnList = reactive([
  {
    id: 0,
    text: "发电机组",
    path: "/equipment/fdjz/1",
    history: false,
    type: "success",
  },
  {
    id: 1,
    text: "左主机",
    path: "/equipment/main/left/main",
    history: false,
    type: "primary",
  },
  {
    id: 2,
    text: "右主机",
    path: "/equipment/main/right/main",
    history: false,
    type: "danger",
  },
  {
    id: 3,
    text: "货油泵",
    path: "/equipment/hyg/3",
    history: false,
    type: "warning",
  },
]);
let hyb = ref([
  { text: `1#${t("hyg.cargoOilPump")}`, num: 8, sort: 601, time: "z607" },
  { text: `2#${t("hyg.cargoOilPump")}`, num: 8, sort: 609, time: "z615" },
  { text: `3#${t("hyg.cargoOilPump")}`, num: 8, sort: 617, time: "z623" },
]);
let pumpDataList = ref(null);
let hybData = computed(() => {
  return (sort, index, n) => {
    let sorts = "z" + (sort + index * 8);
    if (!pumpDataList.value) return initDecimalPlaces(n);
    return pumpDataList?.value[sorts]?.currentValue || initDecimalPlaces(n);
  };
});
const Lighthyb = computed(() => {
  return (value) => {
    return value > 3 ? true : false;
  };
});
watch(
  () => allData.value,
  (newVal, oldVal) => {
    let pumpInitData = newVal.hyb || {};
    pumpDataList.value = pumpInitData;
  },
  {
    deep: true,
  }
);
watch(
  () => allData.value,
  (newVal, oldVal) => {
    powerListDate.value[0] = newVal.power1;
    powerListDate.value[1] = newVal.power2;
    powerListDate.value[2] = newVal.power3;
  },
  {
    deep: true,
  }
);

let LightAni = computed(() => {
  return (zjVal) => {
    if (zjVal > 1650) return true; //超速
    if (zjVal >= 250) return true; //运行
    if (zjVal < 250) return false; // 停机
  };
});
let renderValue = computed(() => {
  return (index) => {
    let key = "z" + (301 + 16 * index);
    let value = powerListDate.value[index]?.[key]?.currentValue || 0;
    return value;
  };
});
// 开机转态
const hostRunningStatus = computed(() => {
  return (str, zc, dc) => {
    let point = 10;
    let zcValue = zc ?? 0;
    let dcValue = dc ?? 0;
    if (zcValue < point && zcValue < point) return 0;
    if (!str) {
      // 倒车
      if (dcValue >= point) return 2;
      else return 0;
    } else {
      console.log(111);
      if (zcValue >= point) return 3;
      else return 0;
      // 正车
    }
  };
});
</script>

<style lang="scss" scoped>
.content {
  font-size: 32px;
  text-align: center;
  .wrap {
    width: 900px;
    height: 650px;
    background: url("@/assets/image/lj.png") no-repeat;
    background-size: 900px 650px;
    background-position: center center;
    object-fit: cover;
    position: relative;
  }
  // line-height: 10rem;
  .con-c {
    // .content {
    // 	& > div {
    // 		margin-right: 5px;
    // 	}
    // }
  }
  .ss {
    cursor: pointer;
  }
  canvas {
    // width: 100%;
    // height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
  }
}
</style>
